<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body layout:fragment="content">
<div id="from">
    <el-form :inline="false" label-width="100px" :model="residenceInfo"  ref="residenceInfo" :rules="rules"  style="padding: 30px;">

        <el-form-item label="旅客姓名:" prop="passengerName" >
            <el-input v-model="residenceInfo.passengerName" ></el-input>
        </el-form-item>
        <el-form-item label="住址:" prop="address">
            <el-input v-model="residenceInfo.address" ></el-input>
        </el-form-item>
        <el-form-item label="职业:" prop="occupation" >
            <el-input v-model="residenceInfo.occupation" ></el-input>
        </el-form-item>
        <el-form-item label="房源:" prop="hotelId" >
            <el-input v-model="residenceInfo.hotelId" ></el-input>
        </el-form-item>
        <el-row style="text-align: center">
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="resetForm('residenceInfo')">重置</el-button>
            <el-button @click="cancel()">取消</el-button>
        </el-row>
    </el-form>
</div>
<script>

    var vm=new Vue({
        el: '#from',
        data:function () {
            var id=top.vm.getVmId();
            var residenceInfo=ajaxGet("/api/passenger/residence/info/read",{id:id});
            var rules={
                passengerName:{ required: true, message: '请输入旅客姓名!', trigger: 'blur' },
                address:{ required: true, message: '请输入住址!', trigger: 'blur' },
                occupation:{ required: true, message: '请输入职业!', trigger: 'blur' },
                hotelId:{ required: true, message: '请选择房源!', trigger: 'blur' }
            };
            return {
                residenceInfo:residenceInfo,
                rules:rules
            };
        },
        methods:{
            onSubmit:function () {
                this.$refs['residenceInfo'].validate(function(valid) {
                    if (valid) {
                        //top.
                        top.vm.$confirm('确定保存?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'info '
                         }).then(() => {
                            var res=ajaxPost("/api/passenger/residence/info/save",vm.residenceInfo);
                            if(res == true){
                                top.vm.$message({type: 'success', message: '保存成功!'});
                                vm.closeParentDialog();
                                top.vm.dialogInfo.vm.refresh();
                            }else{
                                top.vm.$message({type: 'success', message: '保存失败!'});
                            }

                         });
                    }
                });

            },
            cancel:function () {
                this.closeParentDialog();
            },
            closeParentDialog:function(){
                top.vm.$data.dialogInfo.dialogVisible=false;
            },
            resetForm:function(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</body>
</html>